<!doctype html>
<html>
	<head>
		<!--声明当前页面的编码集：charset=gbk,gb2312(中文编码)，utf-8国际编码-->
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<!--当前页面的三要素-->
		<title>第十五节 ：css高级(上)块级元素</title>
		<meta name="Keywords" content="关键词,关键词">
		<meta name="description" content="">

		<!--css,js-->
		<style type="text/css">
			{margin:0;padding:0;}
			body{font-size:12px;font-family:"微软雅黑";}
			a{text-decoration:none;color:red;font-size:16px;}
			h2{text-align:center;}
			.div{width:800px;margin:10px auto;border:1px solid #000;}
			.div .lbk{width:240;border:1px dashed #000;margin:5px 8px;float:left;}
			.div .div_block{width:480px;height:200px;background:#6C0;float:left;}
			.div .div_block_float{width:300px;height:200px;background:#930;float:right;}
			.div .dl_block{border:1px solid red;}
			.div .dl_block dt{border:1px solid green;}
			.div h1,h2{border:0px solid #900;}
			.div table{border:1px solid red;border-collapse:collapse;}
			.div table th{}
			.div table tr td{border:1px solid #600;text-align:center;}
			.div .clear{clear:both;}

			.display{width:800px;margin:10px auto;border:1px solid #000;}
			/*给行内元素添加display:block;就可以将原来的行内元素升级为块级元素，就可以同具备块级元素所拥有的属性值和功能*/

			.overflow{width:800px;margin:10px auto;border:1px solid #000;}
			.overflow .over{width:500px;height:100px;border:1px solid red;margin:10px auto;
				/*溢出的部分 会隐藏掉
				overflow:hidden;*/
				/*不论任何时候都出现滚动条*/
				overflow:scroll;
				/*当我们的内容溢出最大范围时 才出现滚动条*/
				overflow:auto;
			}

		</style>

	</head>
<body>
	<h1>第十五节 ：css高级(上)块级元素</h1>
	<div class="div">
		-----------------------------<a href="#ceng">div标签</a>|<a href="#dl">dl自定义列表</a>|<a href="#hr">水平分隔线</a>|
		<a href="#ol">有序列表</a>|<a href="#ul">无序列表</a>|<a href="#p">p标签</a>|<a href="#table">table标签</a>---------------------------- <br />

		<p>1.  每个块级元素默认占一行高度，一行内添加一个块级元素后无法一般无法添加其他元素
		（float浮动后除外）;<br />
		2.  两个块级元素连续编辑时，会在页面自动换行显示。块级元素一般可嵌套块级元素或行内元素 ;
		常见块级元素：</p>

		<h2>一. div标签<a name="ceng"></a></h2>		
		<div class="div_block"><h2>float:left;</h2></div> 
		<div class="div_block_float"><h2>float:right;</h2></div>
		<!--如果两个都浮动，只要清除浮动就不会重叠-->
		<!--<div style="clear:both;"></div> -->
		<div class="clear"></div>

		<div class="lbk">
			<h2>二. dl - 定义列表<a name="dl"></a></h2>
			<dl>
				<dt>列表项一</dt>
					<dd>列表项1</dd>
					<dd>列表项2</dd>
					<dd>列表项3</dd>

				<dt>列表项二</dt>
					<dd>表项1</dd>
					<dd>表项2</dd>
					<dd>表项3</dd>
			</dl>
		</div>

		<div class="lbk">
			<h2>三. ol - 有序列表 <a name="ol"></a></h2>
			<ol>
				<li>我是一个有序列表项</li>
				<li>我是一个有序列表项</li>
				<li>我是一个有序列表项</li>
				<li>我是一个有序列表项</li>
				<li>我是一个有序列表项</li>
				<li>我是一个有序列表项</li>
			</ol>
		</div>
		<div class="lbk">
			<h2>四. ul - 无序列表<a name="ul"></a></h2>
			<ul>
				<li>我是一个无序列表项</li>
				<li>我是一个无序列表项</li>
				<li>我是一个无序列表项</li>
				<li>我是一个无序列表项</li>
				<li>我是一个无序列表项</li>
				<li>我是一个无序列表项</li>
			</ul>
		</div>
		<div class="clear"></div>

		
		<h2>五. hr - 水平分隔线   <a name="hr"></a></h2><hr>

		<div class="lbk">
			<h2>六. p标签（段落标签）<a name="p"></a></h2>
			<p>欢迎加入潭州学院！成立于2007年，互联网最早的在线教育学院，数百名认证讲师365天在线直播授课，是以技术为驱动，学员为本的教育机构，100+门课程解决学员工作技能问题和兴趣爱好培训，同时开放线上讲师申请授课，领跑最前沿核心技术和课程，8年成功帮助超过300000学员实现自我价值和解决就业技能问题。</p>
		</div>
		<div class="clear"></div>


		<h2>七. table标签<a name="table"></a></h2>
		<table>
			<th colspan="5">我是一个表格</th>
			<tr>
				<td>姓名</td>
				<td>性别</td>
				<td>年龄</td>
				<td>爱好</td>
				<td>QQ</td>
			</tr>
			<tr>
				<td>爽歪歪</td>
				<td>男</td>
				<td>含苞待放</td>
				<td>美女，妹子</td>
				<td>1328560691</td>
			</tr>
		</table>
	</div>

	<div class="display">
		<h2>css display</h2>
		<pre>显示：display	
			1.  none - 此元素不会被显示 ;
			2.  block - 显示为块级元素，此元素前后会带有换行符 ;
			3.  inline -  默认 , 此元素会被显示为内联元素，元素前后没有换行符 ;
		</pre>
		<a href="#">我是一个超链接</a> <span>我是span标签</span>
	</div>

	<div class="overflow">
		<h2>CSS overflow属性</h2>
		<pre>
		1.overflow 属性规定当内容溢出元素框时发生的事情 ;
		2.这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要
		用户代理都会提供一种滚动机制 ;
		3.有可能即使元素框中可以放下所有内容也会出现滚动条 ;
		</pre>

		<div class="over">
			280+ 门不同科目
		涵盖当前最热门的职业技能
		潭州学院（tanzhouedu.com）是互联网最早的在线教育学院，是以培养学员兴趣和从事互联网课堂研究为主的综合性网络学院，成立于2007年。其中网络营销、JAVA、前端等课程是互联网在线课程类第一名。旗下有考试资讯门户考试在线(kaoshi110.net)和中国最大的在线模拟考试系统模考吧(mokaoba.com)
		1.overflow 属性规定当内容溢出元素框时发生的事情 ;
		2.这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要
		用户代理都会提供一种滚动机制 ;
		3.有可能即使元素框中可以放下所有内容也会出现滚动条 ;
		</div>
	</div>

</body>
</html>